<!-- 车辆管理 -->
<template>
  <div class="dashboard-container driver customer-list-box">
    <el-card shadow="never">
      <el-row
        type="flex"
      >
        <el-form
          ref="form"
          :model="forUser"
          label-width="84px"
        >
          <el-col :span="8">
            <el-form-item label="司机账号：">
              <el-input
                v-model="forUser.account"
                placeholder="请输入司机账号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="司机姓名：">
              <el-input
                v-model="forUser.name"
                placeholder="请输入司机姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              class="driver-nmber"
              label="司机手机号："
            >
              <el-input
                v-model="forUser.phone"
                placeholder="请输入司机手机号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属机构：">
              <!-- 获得的树形解构 -->
              <Treeselect
                v-model="value"
                :normalizer="normalizer"
                :options="options"
                :searchable="true"
                style="width: 100%"
                placeholder="请输入所属机构"
                @open="open"
                @close="close"
                @input="treenodeChange"
              >
              </Treeselect>
              <img
                ref="arrow"
                src="../../assets/pullDown.png"
                style="position:absolute;width:18px;height:18px;right:9px;top:12px;cursor:pointer;pointer-events:none;transition-duration:0.3s"
              />
              <!-- ================================================所属机构 -->
              <!-- <el-cascader
                v-model="value"
                class="cascader-institution"
                :props="props"
                :options="options"
              ></el-cascader> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button @click="search">搜索</el-button>
            <el-button
              class="btn-rest"
              @click="resetForm"
            >重置</el-button>
          </el-col>

        </el-form>
      </el-row>
    </el-card>
    <!-- 表格组件 -->
    <!-- v-loading="loading"
    element-loading-text="拼命加载中" -->
    <el-card
      shadow="never"
      class="table"
    >
      <el-table
        :data="searchListArr"
        style="width: 100%"
      >
        <!-- =============================================表格序列号 -->
        <el-table-column
          :fixed="false"
          :index="getIndex"
          type="index"
          label="序号"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="account"
          label="司机账号"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="司机姓名"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="司机电话"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="truck.licensePlate"
          label="关联车辆"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="agency.name"
          label="所属机构"
          width="200"
        >
        </el-table-column>

        <el-table-column
          prop="agency.workStatus"
          label="工作状态"
          width="200"
        >
          <template v-slot="{row}">
            <div
              v-if="row.workStatus === 1"
              class="state"
            >
              <div

                class="work"
              ></div>
              <span class="text">上班</span>
            </div>
            <div
              v-else
              class="state"
            >
              <div class="under"></div>
              <span class="text">休息</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="130"
        >
          <template v-slot="{row}">

            <el-button
              type="text"
              size="small"
              @click="look(row.userId)"
            >查看</el-button>
            <el-button
              type="text"
              size="small"
              @click="truckTypeDetail(row.truck.id, row.userId)"
            >配置车辆</el-button>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row
        class="pagination"
        type="flex"
        justify="center"
      >
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 配置车辆弹出层 -->
    <CarConfig
      ref="CarConfig"
      :dialog-table-visible.sync="dialogTableVisible"
      :visible.sync="dialogTableVisible"
      :searchlist="searchlist"
    ></CarConfig>
    <!-- 配置车辆第一层对话框 -->
    <el-dialog
      class="dialog"
      width="28%"
      :visible.sync="cartDisposition"
    >
      <h4>车辆配置</h4>
      <p
        style="font-weight: 400;color: #332929;"
      >配置车辆需满足以下条件</p>
      <el-row>
        <el-col>
          <span>1司机信息已完善</span>
          <span>2司机已设置排班</span>
        </el-col>
        <el-col>
          <p style="font-weight: 400;color: #332929;">3司机绑定车辆未在启用状态</p>

        </el-col>
      </el-row>
      <el-row
        type="flex"
        justify="end"
      >
        <el-button
          class="btnNo"
          size="mini"
          @click="cartDisposition=false"
        >取消
        </el-button>
        <el-button
          class="btnOk"
          size="mini"
          @click="showPrompu"
        >确定
        </el-button>
      </el-row>

    </el-dialog>
  </div>
</template>

<script>
import { driverList } from '@/api/transit'
import { agencyList } from '@/api/institutions'
// 树形控件
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// 配置车辆弹出层
import CarConfig from './components/car-config.vue'
import { transListToTreeData } from '@/utils/tree'
export default {
  name: 'Courses',
  components: {
    CarConfig,
    Treeselect
  },
  data () {
    return {
      a: null,
      treevalue: null, // 树形控件绑定的v-model
      startIndex: 0, // 表格序列号
      searchListArr: [], // 搜索后得到的数据
      cartDisposition: false,
      // 车辆详情
      cartTrademark: '', // 车牌好选择
      dialogTableVisible: false, // 配置车辆弹框
      searchlist: [], // 获取全部车牌号的信息
      total: 0,
      options: [],
      props: {
        value: 'id',
        label: 'name'
      },
      value: null,
      tableData: [],
      userInfor: {
        agency: {}
      },
      queryData: {
        page: 1,
        pageSize: 999
      },
      loading: true,
      forUser: {
        agentId: null, // 机构ID
        account: '', // 司机编号 账号
        name: '', // 司机姓名
        phone: '', // 电话
        page: 1, // 页码
        pageSize: 10 // 一页几条数据
      },
      agencyOptions: [],
      // 机构编辑显示名称
      normalizer(node) {
        if (node.children && node.children.length) {
          delete node.children
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      }

    }
  },
  created () {
    this.getDrivePagination(this.queryData)
    this.agencyList()
    this.search()
  },
  methods: {
    // 树形选择器 获取到机构ID
    treenodeChange(value) {
      this.forUser.agentId = value
    },
    open() {
      this.$refs.arrow.style.transform = 'rotate(-180deg)'
    },
    close() {
      this.$refs.arrow.style.transform = 'rotate(0deg)'
    },

    // 获取司机分页信息
    async getDrivePagination(data) {
      const res = await driverList(data)
      this.tableData = res.data.items
      this.getCartBrandlist()
      // this.$loading().close()// 关闭加载
    },
    // 获取树状机构信息
    async agencyList() {
      const res = await agencyList()

      const institutionMage = JSON.parse(res.data)
      this.options = transListToTreeData(institutionMage, 0)
      console.log(this.options, institutionMage)
    },
    // 点击搜索事件
    async search() {
      const res = await driverList(this.forUser)
      this.searchListArr = res.data.items
      this.total = +res.data.counts
    },
    // 分页组件事件 每页条数
    handleSizeChange(data) {
      this.forUser.pageSize = data
      this.search()
    },
    // 分页组件事件 当前页改变
    handleCurrentChange (data) {
      this.forUser.page = data
      this.search()
      this.startIndex = (this.forUser.page - 1) * this.forUser.pageSize
      // console.log(this.startIndex, this.getIndex())
    },
    // 重置表单
    resetForm() {
      console.log(this.$refs.form)
      this.forUser = {
        account: '', // 司机编号 账号
        name: '', // 司机姓名
        phone: '', // 电话
        page: 1, // 页码
        pageSize: 10 // 一页几条数据
      }
      this.search()
      console.log(123)
    },
    // 获取分配车辆车牌号
    getCartBrandlist () {
      this.searchlist = this.tableData.filter(item => item.truck && item.truck.licensePlate)
    },
    // 获取车辆详情信息
    async truckTypeDetail(value, userId) {
      this.$refs.CarConfig.truckTypeDetail(value, userId)
      this.cartDisposition = true
    },
    // 第一层提示弹窗
    showPrompu() {
      this.dialogTableVisible = true
      this.cartDisposition = false
    },
    // 获取表格序列号起始值
    getLnitial() {

    },
    // 获取索引加上起始值
    getIndex(index) {
      return index + this.startIndex + 1
    },
    // 查看按钮
    look(userId) {
      this.$router.push({
        path: '/transit/driver-detail',
        query: { id: userId }
      })
    }
  }

}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

  .el-card__body {
    padding:20px 20px 0px 0;
    margin-bottom: 20px;
  }
.dashboard-container{
  padding: 28px 20px 20px 20px;
  ::v-deep .el-card{
    overflow:visible !important ;
    border-radius: 5px;
    .el-col {
      padding: 0 30px 0 30px;

      .cascader-institution {
        width:100% ;
      }

      .el-input__inner:hover {
        border-color:#818693 ;
      }

    .el-form-item__label{
      font-weight: 400;
      padding: 0;
    }

    .el-button {
      margin-left: 12px;
      width: 90px;
      color: #fff;
      background-color: #e15536;
      &:hover {
        background-color: #ffab98;
      }
    }
    .btn-rest {
      padding: 10px;
      background-color: #fff;
      color: #606266;
      &:hover {
        background-color: #ffeeeb;
        border-color: #f3917c;
        color: #e15536;
      }
    }
   }
  }
  // 表格
  ::v-deep .table {
    padding-left: 20px;
  ::v-deep .table-operate {
    border: #e15536;
  }
  .is-center {
    text-align: center;
  }
  .pagination {
    height: 100%;
  }
  // 表格工作状态
    .state {
      display: flex;
      justify-items: center;
      align-items: center;

      .work {
        margin-right:10px ;
        border-radius: 50%;
        width: 6px;
        height: 6px;
        background-color: #1DC779;
      }
      .under {
        margin-right:10px ;
        border-radius: 50%;
        width: 6px;
        height: 6px;
        background-color: #818693;
      }

    }
    .el-table_1_column_8 {
      text-align: center;
    }
  }
 ::v-deep .el-pagination {
   .el-pagination__total {
    font-size: 14px;
     font-weight: 400;
     color: #20232a;
   }
   .el-pagination__sizes {

     .el-input__inner {
      font-size: 14px;
       font-weight: 400;
       color: #20232a;
       &:hover {
        border-color: #e15536;
       }
     }
   }
   .el-pager li {
    font-size: 13px;
   }
   .active {
    color: #e15536;
   }
   .el-pagination__jump {
    font-size: 14px;
    color: #20232a;
    .is-in-pagination {
      margin: 0 7px;
      .el-input__inner {
        color: #20232a;
      }
    }
   }

 }

 // 配置车辆弹出层
 ::v-deep .el-dialog {
  width: 640px;
  .el-card__body {
    padding: 21px 22px 0;
  }
  .cartTrademark {
    width: 238px;
  }
  // 弹出层表格
  .el-table{
    margin-top: 20px ;
   .el-table_2_column_11 {
   text-align: center;
   }

   .state {
        display: flex;
        justify-items: center;
        align-items: center;

        .work {
          margin-right:10px ;
          border-radius: 50%;
          width: 6px;
          height: 6px;
          background-color: #1DC779;
        }
        .under {
          margin-right:10px ;
          border-radius: 50%;
          width: 6px;
          height: 6px;
          background-color: #818693;
        }

      }
  }
  .dialog-btn-ok {
    width: 90px;
    height: 40px;
    color: #ffeeeb;
    background-color: #e15536;
    &:hover {
      background-color: #ffab98;
    }
  }
  .dialog-btn-no {
    width: 90px;
    color: #818693;
    border: 1px solid #818693;
    background-color: #fff;
    &:hover {
      color:  #e15536;
      border: 1px solid #e15536;
      background-color: #ffeeeb;
    }
  }
 }

}
::v-deep .dialog {
  .el-dialog__body {
    padding-top:20px ;
    .p {
      font-weight: 400;
    }
    h4 {
      margin-top:0 ;
      color: #332929;
      font-weight: 400;
      font-size: 16px;
    }
    span {
      color: #332929;
      font-weight: 400;
      margin-right: 80px;
    }

  }
  .el-dialog__header {
    display: none;
  }

  .btnOk {
      color: #fff;
      background-color: #e15536;
      &:hover {
        background-color: #ffab98;
      }
    }
    .btnNo {
      background-color: #fff;
      color: #606266;
      &:hover {
        background-color: #ffeeeb;
        border-color: #f3917c;
        color: #e15536;
      }
    }
  .el-button {
    width: 56px;
    height: 32px;
  }

}
</style>

